| echarts+圆柱图 | 您所在的位置：网站首页 › echarts 圆柱图 › echarts+圆柱图 |
echarts+圆柱图
|
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('test1'));
//圆柱图
// 指定图表的配置项和数据
var dataArray = ['product', '收入','首单收入', '邀请收入', '分成收入', '签到收入', '任务收入'];
myChart1.setOption({
title: {
text: '用户收入数据：',
},
legend: {},
tooltip: {},
dataset: {
// dimensions: ['product', '收入','首单收入', '邀请收入', '分成收入', '签到收入', '任务收入'],
source: [
dataArray,
['1月份', 41.1, 30.4, 65.1, 53.3, 41.1,10],
['2月份', 86.5, 92.1, 85.7, 83.1, 86.5,10],
['3月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
['4月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
['5月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
['6月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
['7月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
['8月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
['9月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
['10月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
['11月份', 24.1, 67.2, 79.5, 86.4, 24.1,10],
['12月份', 24.1, 67.2, 79.5, 86.4, 24.1,10]
]
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'},
]
});
myCart1.showLoading(); //数据加载完之前先显示一段简单的loading动画
//异步获取收入数据
$.ajax({
url: '/form/select',
method: "POST",
async: true,
data: {
},
success: function (result) {
if (result.code == 200) {
var amountArray=[];
$.each(result.data, function (key, value) {
const ans = value.slice(1, -1).split(',');
amountArray.push(ans);
});
amountArray.unshift(dataArray);
myChart1.hideLoading(); //隐藏加载动画
myChart1.setOption({ //加载数据图表
dataset: {
source:amountArray
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {
type: 'category',
axisLabel: {
show: true,
interval: 0
}},
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'},
{type: 'bar'},
{type: 'bar'},
{type: 'bar'},
]
});
} else {
console.log("调用接口失败");
}
}
});
后台返回的数组格式： {11=[11月份,1722.00,0.00,65.00,17.50,337.00,441.00], 1=[1月份,0.00,0.00,0.00,0.00,0.00,0.00], 12=[12月份,0.00,0.00,0.00,0.00,0.00,0.00], 2=[2月份,0.00,0.00,0.00,0.00,0.00,0.00], 3=[3月份,0.00,0.00,0.00,0.00,0.00,0.00], 4=[4月份,0.00,0.00,0.00,0.00,0.00,0.00], 5=[5月份,0.00,0.00,0.00,0.00,0.00,0.00], 6=[6月份,11015.00,0.00,20.00,18.00,0.00,0.00], 7=[7月份,844.00,10.00,190.00,22.50,0.00,0.00], 8=[8月份,507.01,5.00,80.00,0.00,0.00,0.00], 9=[9月份,2302.00,5.00,75.00,10.50,0.00,0.00], 10=[10月份,2843.00,0.00,70.00,7.50,178.00,2134.00]}
|
【本文地址】
公司简介
联系我们